<template>
    <n-card header-style="background-color:#fafafa" class="my-2 h-std" title="我的场景">
        <template #header-extra>
            <n-grid x-gap="12" :cols="4">
                <n-gi :span="3">
                    <n-input placeholder="搜索">
                        <template #prefix>
                            <n-icon :component="SearchIcon" />
                        </template>
                    </n-input>
                </n-gi>
                <n-gi :span="1">
                    <n-button @click="if_modal = true" type="primary">
                        创建场景
                    </n-button>
                </n-gi>
            </n-grid>
        </template>
        <n-modal style="width:600px" v-model:show="if_modal" preset="dialog" title="Dialog">

            <template #header>
                创建场景
            </template>
            <CreateScenarioFormComponent class="m-2" @finish_create="finishCreate()" />
        </n-modal>

        <template v-for="i in scenarioStore.scenario_list" :key="i.id">

            <ScenarioItemComponent :data="i" />
            <n-divider />
        </template>

    </n-card>
</template>

<script setup>
import { Search as SearchIcon } from '@vicons/ionicons5'
import ScenarioItemComponent from '@/components/scenario/ScenarioItemComponent.vue';
import { useRouter } from 'vue-router';
import { useScenarioStore } from '@/stores/scenarioStore';
import { onMounted, ref } from 'vue';
import CreateScenarioFormComponent from '@/components/scenario/CreateScenarioFormComponent.vue';

const if_modal = ref(false);

const scenarioStore = useScenarioStore();

const finishCreate = async () => {
    if_modal.value = false;
    await scenarioStore.getScenarioList();
}
onMounted(async () => {
    await scenarioStore.getScenarioList();
})


</script>